<template>
  <div class="text-detection">
    <div class="page-header">
      <h2>文本检测</h2>
      <p>智能分析文本内容，识别虚假信息和谣言</p>
    </div>

    <div class="detection-container">
      <!-- 输入区域 -->
      <div class="input-section">
        <div class="section-header">
          <h3>输入检测内容</h3>
          <div class="input-methods">
            <button 
              class="method-btn" 
              :class="{ active: inputMethod === 'text' }"
              @click="inputMethod = 'text'"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                <polyline points="14,2 14,8 20,8"/>
              </svg>
              文本输入
            </button>
            <button 
              class="method-btn" 
              :class="{ active: inputMethod === 'file' }"
              @click="inputMethod = 'file'"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="17,8 12,3 7,8"/>
                <line x1="12" y1="3" x2="12" y2="15"/>
              </svg>
              文件上传
            </button>
            <button 
              class="method-btn" 
              :class="{ active: inputMethod === 'url' }"
              @click="inputMethod = 'url'"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
              </svg>
              链接抓取
            </button>
          </div>
        </div>

        <!-- 文本输入 -->
        <div v-if="inputMethod === 'text'" class="text-input-area">
          <textarea 
            v-model="inputText" 
            placeholder="请输入要检测的文本内容..."
            :maxlength="maxTextLength"
            rows="8"
            @input="handleTextInput"
          ></textarea>
          <div class="input-meta">
            <span class="char-count">{{ inputText.length }}/{{ maxTextLength }}</span>
            <button class="clear-btn" @click="clearInput" v-if="inputText.length > 0">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M18 6L6 18"/>
                <path d="M6 6l12 12"/>
              </svg>
              清空
            </button>
          </div>
        </div>

        <!-- 文件上传 -->
        <div v-if="inputMethod === 'file'" class="file-input-area">
          <div class="file-upload-zone" @drop="handleFileDrop" @dragover.prevent @dragenter.prevent>
            <input 
              type="file" 
              ref="fileInput"
              @change="handleFileUpload"
              accept=".txt,.doc,.docx,.pdf"
              style="display: none"
            />
            <div class="upload-content" @click="$refs.fileInput.click()">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="17,8 12,3 7,8"/>
                <line x1="12" y1="3" x2="12" y2="15"/>
              </svg>
              <p>点击选择文件或拖拽文件到此处</p>
              <p class="file-hint">支持 .txt, .doc, .docx, .pdf 格式，最大10MB</p>
            </div>
          </div>
          <div v-if="uploadedFile" class="uploaded-file">
            <div class="file-info">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                <polyline points="14,2 14,8 20,8"/>
              </svg>
              <span>{{ uploadedFile.name }}</span>
              <span class="file-size">({{ formatFileSize(uploadedFile.size) }})</span>
            </div>
            <button class="remove-file-btn" @click="removeFile">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M18 6L6 18"/>
                <path d="M6 6l12 12"/>
              </svg>
            </button>
          </div>
        </div>

        <!-- URL输入 -->
        <div v-if="inputMethod === 'url'" class="url-input-area">
          <div class="url-input-group">
            <input 
              type="url" 
              v-model="inputUrl" 
              placeholder="请输入要检测的网页链接..."
              @keyup.enter="fetchUrlContent"
            />
            <button class="fetch-btn" @click="fetchUrlContent" :disabled="!inputUrl.trim()">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
                <path d="M21 3v5h-5"/>
              </svg>
              抓取内容
            </button>
          </div>
          <div v-if="urlContent" class="url-content">
            <div class="url-meta">
              <span class="url-title">{{ urlContent.title }}</span>
              <span class="url-domain">{{ urlContent.domain }}</span>
            </div>
            <div class="url-text">{{ urlContent.text }}</div>
          </div>
        </div>

        <!-- 检测选项 -->
        <div class="detection-options">
          <div class="option-group">
            <h4>检测选项</h4>
            <div class="option-items">
              <label class="option-item">
                <input type="checkbox" v-model="detectionOptions.sentiment" />
                <span>情感分析</span>
              </label>
              <label class="option-item">
                <input type="checkbox" v-model="detectionOptions.keyword" />
                <span>关键词识别</span>
              </label>
              <label class="option-item">
                <input type="checkbox" v-model="detectionOptions.source" />
                <span>来源验证</span>
              </label>
              <label class="option-item">
                <input type="checkbox" v-model="detectionOptions.similarity" />
                <span>相似度比对</span>
              </label>
            </div>
          </div>
          
          <div class="option-group">
            <h4>敏感度设置</h4>
            <div class="sensitivity-slider">
              <input 
                type="range" 
                v-model="sensitivity" 
                min="1" 
                max="10" 
                step="1"
              />
              <div class="sensitivity-labels">
                <span>低</span>
                <span class="sensitivity-value">{{ sensitivity }}</span>
                <span>高</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 检测按钮 -->
        <div class="detection-actions">
          <button 
            class="btn btn-primary detect-btn" 
            @click="startDetection"
            :disabled="!canDetect || isDetecting"
          >
            <svg v-if="isDetecting" width="16" height="16" class="spinning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
              <path d="M21 3v5h-5"/>
            </svg>
            <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M9 12l2 2 4-4"/>
              <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z"/>
            </svg>
            {{ isDetecting ? '检测中...' : '开始检测' }}
          </button>
          <button class="btn btn-secondary" @click="clearAll">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M3 6h18"/>
              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
              <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
            </svg>
            清空重置
          </button>
        </div>
      </div>

      <!-- 检测进度 -->
      <div v-if="isDetecting" class="detection-progress">
        <div class="progress-header">
          <h3>检测进度</h3>
          <span class="progress-text">{{ currentStep }}</span>
        </div>
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: progress + '%' }"></div>
        </div>
        <div class="progress-steps">
          <div class="step" :class="{ active: progress >= 20 }">文本预处理</div>
          <div class="step" :class="{ active: progress >= 40 }">特征提取</div>
          <div class="step" :class="{ active: progress >= 60 }">模型分析</div>
          <div class="step" :class="{ active: progress >= 80 }">结果生成</div>
          <div class="step" :class="{ active: progress >= 100 }">完成</div>
        </div>
      </div>

      <!-- 检测结果 -->
      <div v-if="detectionResult" class="result-section">
        <div class="section-header">
          <h3>检测结果</h3>
          <div class="result-actions">
            <button class="btn btn-secondary" @click="exportResult">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="7,10 12,15 17,10"/>
                <line x1="12" y1="15" x2="12" y2="3"/>
              </svg>
              导出结果
            </button>
            <button class="btn btn-secondary" @click="saveResult">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                <polyline points="17,21 17,13 7,13 7,21"/>
                <polyline points="7,3 7,8 15,8"/>
              </svg>
              保存结果
            </button>
          </div>
        </div>

        <!-- 总体结论 -->
        <div class="result-summary">
          <div class="summary-card">
            <div class="summary-conclusion">
              <div class="conclusion-badge" :class="detectionResult.conclusion">
                {{ getConclusionLabel(detectionResult.conclusion) }}
              </div>
              <div class="confidence-score">
                <span>可信度</span>
                <div class="confidence-bar">
                  <div 
                    class="confidence-fill" 
                    :style="{ width: detectionResult.confidence + '%' }"
                  ></div>
                </div>
                <span>{{ detectionResult.confidence }}%</span>
              </div>
            </div>
            <div class="summary-description">
              {{ detectionResult.description }}
            </div>
          </div>
        </div>

        <!-- 详细分析 -->
        <div class="detailed-analysis">
          <div class="analysis-tabs">
            <button 
              v-for="tab in analysisTabs" 
              :key="tab.key"
              class="tab-btn"
              :class="{ active: activeTab === tab.key }"
              @click="activeTab = tab.key"
            >
              {{ tab.label }}
            </button>
          </div>

          <div class="tab-content">
            <!-- 关键词分析 -->
            <div v-if="activeTab === 'keywords'" class="keywords-analysis">
              <div class="keywords-grid">
                <div 
                  v-for="keyword in detectionResult.keywords" 
                  :key="keyword.word"
                  class="keyword-item"
                  :class="keyword.type"
                >
                  <span class="keyword-text">{{ keyword.word }}</span>
                  <span class="keyword-score">{{ keyword.score }}%</span>
                </div>
              </div>
            </div>

            <!-- 情感分析 -->
            <div v-if="activeTab === 'sentiment'" class="sentiment-analysis">
              <div class="sentiment-chart">
                <div class="sentiment-item">
                  <div class="sentiment-label">积极</div>
                  <div class="sentiment-bar">
                    <div 
                      class="sentiment-fill positive" 
                      :style="{ width: detectionResult.sentiment.positive + '%' }"
                    ></div>
                  </div>
                  <div class="sentiment-value">{{ detectionResult.sentiment.positive }}%</div>
                </div>
                <div class="sentiment-item">
                  <div class="sentiment-label">中性</div>
                  <div class="sentiment-bar">
                    <div 
                      class="sentiment-fill neutral" 
                      :style="{ width: detectionResult.sentiment.neutral + '%' }"
                    ></div>
                  </div>
                  <div class="sentiment-value">{{ detectionResult.sentiment.neutral }}%</div>
                </div>
                <div class="sentiment-item">
                  <div class="sentiment-label">消极</div>
                  <div class="sentiment-bar">
                    <div 
                      class="sentiment-fill negative" 
                      :style="{ width: detectionResult.sentiment.negative + '%' }"
                    ></div>
                  </div>
                  <div class="sentiment-value">{{ detectionResult.sentiment.negative }}%</div>
                </div>
              </div>
            </div>

            <!-- 相似度分析 -->
            <div v-if="activeTab === 'similarity'" class="similarity-analysis">
              <div class="similarity-list">
                <div 
                  v-for="similar in detectionResult.similarTexts" 
                  :key="similar.id"
                  class="similarity-item"
                >
                  <div class="similarity-header">
                    <span class="similarity-score">{{ similar.score }}% 相似</span>
                    <span class="similarity-source">{{ similar.source }}</span>
                  </div>
                  <div class="similarity-text">{{ similar.text }}</div>
                </div>
              </div>
            </div>

            <!-- 来源验证 -->
            <div v-if="activeTab === 'source'" class="source-analysis">
              <div class="source-verification">
                <div class="verification-result">
                  <div class="verification-status" :class="detectionResult.sourceVerification.status">
                    {{ getSourceStatusLabel(detectionResult.sourceVerification.status) }}
                  </div>
                  <div class="verification-details">
                    <p>{{ detectionResult.sourceVerification.description }}</p>
                    <div class="verification-links">
                      <a 
                        v-for="link in detectionResult.sourceVerification.links" 
                        :key="link.url"
                        :href="link.url"
                        target="_blank"
                        class="verification-link"
                      >
                        {{ link.title }}
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

// 输入方法
const inputMethod = ref('text')
const inputText = ref('')
const inputUrl = ref('')
const uploadedFile = ref(null)
const urlContent = ref(null)
const maxTextLength = 5000

// 检测选项
const detectionOptions = reactive({
  sentiment: true,
  keyword: true,
  source: true,
  similarity: true
})

// 敏感度设置
const sensitivity = ref(5)

// 检测状态
const isDetecting = ref(false)
const progress = ref(0)
const currentStep = ref('')

// 检测结果
const detectionResult = ref(null)
const activeTab = ref('keywords')

// 分析标签
const analysisTabs = [
  { key: 'keywords', label: '关键词分析' },
  { key: 'sentiment', label: '情感分析' },
  { key: 'similarity', label: '相似度分析' },
  { key: 'source', label: '来源验证' }
]

// 是否可以检测
const canDetect = computed(() => {
  return inputText.value.trim() || uploadedFile.value || urlContent.value
})

// 处理文本输入
const handleTextInput = () => {
  // 实时处理文本输入
}

// 清空输入
const clearInput = () => {
  inputText.value = ''
}

// 处理文件上传
const handleFileUpload = (event) => {
  const file = event.target.files[0]
  if (file) {
    if (file.size > 10 * 1024 * 1024) {
      alert('文件大小不能超过10MB')
      return
    }
    uploadedFile.value = file
    // 这里应该读取文件内容
    extractTextFromFile(file)
  }
}

// 处理文件拖拽
const handleFileDrop = (event) => {
  event.preventDefault()
  const file = event.dataTransfer.files[0]
  if (file) {
    uploadedFile.value = file
    extractTextFromFile(file)
  }
}

// 从文件提取文本
const extractTextFromFile = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    inputText.value = e.target.result
  }
  reader.readAsText(file)
}

// 移除文件
const removeFile = () => {
  uploadedFile.value = null
  inputText.value = ''
}

// 抓取URL内容
const fetchUrlContent = async () => {
  if (!inputUrl.value.trim()) return
  
  try {
    // 这里应该调用API抓取URL内容
    urlContent.value = {
      title: '示例网页标题',
      domain: new URL(inputUrl.value).hostname,
      text: '这是从网页抓取的文本内容示例...'
    }
    inputText.value = urlContent.value.text
  } catch (error) {
    console.error('抓取URL内容失败:', error)
    alert('抓取URL内容失败，请检查链接是否有效')
  }
}

// 开始检测
const startDetection = async () => {
  if (!canDetect.value) return
  
  isDetecting.value = true
  progress.value = 0
  
  // 模拟检测过程
  const steps = [
    { progress: 20, step: '文本预处理中...' },
    { progress: 40, step: '特征提取中...' },
    { progress: 60, step: '模型分析中...' },
    { progress: 80, step: '结果生成中...' },
    { progress: 100, step: '检测完成' }
  ]
  
  for (const { progress: p, step } of steps) {
    progress.value = p
    currentStep.value = step
    await new Promise(resolve => setTimeout(resolve, 1000))
  }
  
  // 根据文本字数判断是否为谣言
  const textLength = inputText.value.length
  const isRumor = textLength >= 15
  const confidence = isRumor ? 85 + Math.random() * 10 : 80 + Math.random() * 10
  
  detectionResult.value = {
    conclusion: isRumor ? 'rumor' : 'true',
    confidence: Math.round(confidence),
    description: isRumor ? 
      '经过AI模型深度分析，该文本包含多个谣言特征，建议谨慎对待。' :
      '经过AI模型分析，该文本内容相对可信，未发现明显谣言特征。',
         keywords: isRumor ? [
       { word: '煽动性词汇', type: 'warning', score: 92 },
       { word: '夸大表述', type: 'suspicious', score: 88 },
       { word: '情绪化语言', type: 'warning', score: 85 }
     ] : [
       { word: '客观表述', type: 'safe', score: 90 },
       { word: '准确用词', type: 'safe', score: 85 }
     ],
    sentiment: {
      positive: isRumor ? 15 : 65,
      neutral: isRumor ? 25 : 30,
      negative: isRumor ? 60 : 5
    },
         similarTexts: isRumor ? [
       {
         id: 1,
         score: 89,
         source: '已辟谣信息库',
         text: '检测到与已知谣言内容高度相似...'
       },
       {
         id: 2,
         score: 76,
         source: '社交媒体',
         text: '发现类似的不实传言模式...'
       }
     ] : [
       {
         id: 1,
         score: 92,
         source: '官方媒体',
         text: '与权威信息源内容高度匹配...'
       }
     ],
         sourceVerification: {
       status: isRumor ? 'unverified' : 'verified',
       description: isRumor ? 
         '该信息无法在权威媒体或官方渠道找到相关报道，存在可信度风险' :
         '该信息与官方渠道发布内容一致，可信度较高',
       links: isRumor ? [
         {
           title: '官方辟谣声明',
           url: 'https://example.com/rumor-debunk'
         }
       ] : [
         {
           title: '官方信息确认',
           url: 'https://example.com/official-info'
         }
       ]
     }
  }
  
  isDetecting.value = false
}

// 清空所有
const clearAll = () => {
  inputText.value = ''
  inputUrl.value = ''
  uploadedFile.value = null
  urlContent.value = null
  detectionResult.value = null
  progress.value = 0
  currentStep.value = ''
}

// 导出结果
const exportResult = () => {
  console.log('导出结果')
  // 这里应该实现导出功能
}

// 保存结果
const saveResult = () => {
  console.log('保存结果')
  // 这里应该调用API保存结果
}

// 获取结论标签
const getConclusionLabel = (conclusion) => {
  const labels = {
    rumor: '谣言',
    fake: '虚假信息',
    suspicious: '可疑内容',
    partial: '部分属实',
    true: '信息属实'
  }
  return labels[conclusion] || conclusion
}

// 获取来源状态标签
const getSourceStatusLabel = (status) => {
  const labels = {
    verified: '已验证',
    unverified: '未验证',
    contradicted: '被反驳',
    unknown: '未知来源'
  }
  return labels[status] || status
}

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

onMounted(() => {
  // 初始化
})
</script>

<style scoped>
.text-detection {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #1e3c72;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.detection-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 输入区域 */
.input-section,
.detection-progress,
.result-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f5f5f5;
}

.section-header h3 {
  margin: 0;
  color: #1e3c72;
  font-size: 18px;
  font-weight: 600;
}

/* 输入方法选择 */
.input-methods {
  display: flex;
  gap: 8px;
}

.method-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 2px solid #e9e9e9;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.method-btn.active {
  border-color: #1e3c72;
  background: #1e3c72;
  color: white;
}

.method-btn:hover {
  border-color: #1e3c72;
}

/* 文本输入区域 */
.text-input-area {
  position: relative;
}

.text-input-area textarea {
  width: 100%;
  padding: 16px;
  border: 2px solid #e9e9e9;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 200px;
  transition: border-color 0.2s;
}

.text-input-area textarea:focus {
  outline: none;
  border-color: #1e3c72;
}

.input-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.char-count {
  font-size: 12px;
  color: #999;
}

.clear-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: #dc3545;
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
  transition: background-color 0.2s;
}

.clear-btn:hover {
  background: rgba(220, 53, 69, 0.1);
}

/* 文件上传区域 */
.file-upload-zone {
  border: 2px dashed #e9e9e9;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  transition: all 0.2s;
  cursor: pointer;
}

.file-upload-zone:hover {
  border-color: #1e3c72;
  background: rgba(30, 60, 114, 0.05);
}

.upload-content svg {
  color: #1e3c72;
  margin-bottom: 16px;
}

.upload-content p {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 16px;
}

.file-hint {
  color: #666 !important;
  font-size: 14px !important;
}

.uploaded-file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 6px;
  margin-top: 16px;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #333;
}

.file-size {
  color: #666;
  font-size: 12px;
}

.remove-file-btn {
  padding: 4px;
  border: none;
  background: transparent;
  color: #dc3545;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.remove-file-btn:hover {
  background: rgba(220, 53, 69, 0.1);
}

/* URL输入区域 */
.url-input-group {
  display: flex;
  gap: 12px;
}

.url-input-group input {
  flex: 1;
  padding: 12px;
  border: 2px solid #e9e9e9;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.url-input-group input:focus {
  outline: none;
  border-color: #1e3c72;
}

.fetch-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #1e3c72;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.fetch-btn:hover {
  background: #2d4a87;
}

.fetch-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.url-content {
  margin-top: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
}

.url-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.url-title {
  font-weight: 600;
  color: #333;
}

.url-domain {
  color: #666;
  font-size: 12px;
}

.url-text {
  color: #666;
  line-height: 1.4;
}

/* 检测选项 */
.detection-options {
  display: flex;
  gap: 32px;
  margin-top: 24px;
}

.option-group h4 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.option-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #333;
  font-size: 14px;
}

.option-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #1e3c72;
}

.sensitivity-slider {
  width: 200px;
}

.sensitivity-slider input[type="range"] {
  width: 100%;
  margin-bottom: 8px;
}

.sensitivity-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

.sensitivity-value {
  font-weight: 600;
  color: #1e3c72;
}

/* 检测按钮 */
.detection-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.btn-primary {
  background: #1e3c72;
  color: white;
}

.btn-primary:hover {
  background: #2d4a87;
}

.btn-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.btn-secondary {
  background: #f5f5f5;
  color: #666;
}

.btn-secondary:hover {
  background: #e9e9e9;
}

.detect-btn {
  font-size: 16px;
  padding: 12px 32px;
}

.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 检测进度 */
.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.progress-text {
  color: #666;
  font-size: 14px;
}

.progress-bar {
  height: 8px;
  background: #e9e9e9;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #1e3c72, #2d4a87);
  transition: width 0.3s ease;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
}

.step {
  font-size: 12px;
  color: #999;
  transition: color 0.3s;
}

.step.active {
  color: #1e3c72;
  font-weight: 600;
}

/* 检测结果 */
.result-actions {
  display: flex;
  gap: 12px;
}

.result-summary {
  margin-bottom: 24px;
}

.summary-card {
  padding: 24px;
  background: #f8f9fa;
  border-radius: 8px;
}

.summary-conclusion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.conclusion-badge {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
}

.conclusion-badge.rumor {
  background: #ffebee;
  color: #d32f2f;
}

.conclusion-badge.fake {
  background: #fff3e0;
  color: #f57c00;
}

.conclusion-badge.suspicious {
  background: #fff3e0;
  color: #f57c00;
}

.conclusion-badge.partial {
  background: #e8f5e8;
  color: #388e3c;
}

.conclusion-badge.true {
  background: #e3f2fd;
  color: #1976d2;
}

.confidence-score {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #666;
}

.confidence-bar {
  width: 100px;
  height: 8px;
  background: #e9e9e9;
  border-radius: 4px;
  overflow: hidden;
}

.confidence-fill {
  height: 100%;
  background: linear-gradient(90deg, #1e3c72, #2d4a87);
  transition: width 0.3s;
}

.summary-description {
  color: #666;
  line-height: 1.4;
}

/* 详细分析 */
.analysis-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.tab-btn {
  padding: 8px 16px;
  border: 2px solid #e9e9e9;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.tab-btn.active {
  border-color: #1e3c72;
  background: #1e3c72;
  color: white;
}

.tab-btn:hover {
  border-color: #1e3c72;
}

/* 关键词分析 */
.keywords-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.keyword-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
}

.keyword-item.warning {
  background: #ffebee;
  color: #d32f2f;
}

.keyword-item.suspicious {
  background: #fff3e0;
  color: #f57c00;
}

.keyword-item.fake {
  background: #f3e5f5;
  color: #7b1fa2;
}

.keyword-score {
  font-weight: 600;
}

/* 情感分析 */
.sentiment-analysis {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sentiment-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sentiment-label {
  width: 60px;
  font-size: 14px;
  color: #333;
}

.sentiment-bar {
  flex: 1;
  height: 24px;
  background: #e9e9e9;
  border-radius: 12px;
  overflow: hidden;
}

.sentiment-fill {
  height: 100%;
  transition: width 0.3s;
}

.sentiment-fill.positive {
  background: #4caf50;
}

.sentiment-fill.neutral {
  background: #ff9800;
}

.sentiment-fill.negative {
  background: #f44336;
}

.sentiment-value {
  width: 50px;
  text-align: right;
  font-size: 14px;
  color: #333;
}

/* 相似度分析 */
.similarity-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.similarity-item {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
}

.similarity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.similarity-score {
  font-weight: 600;
  color: #1e3c72;
}

.similarity-source {
  font-size: 12px;
  color: #666;
}

.similarity-text {
  color: #666;
  line-height: 1.4;
}

/* 来源验证 */
.source-verification {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
}

.verification-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.verification-status.verified {
  background: #e8f5e8;
  color: #388e3c;
}

.verification-status.unverified {
  background: #fff3e0;
  color: #f57c00;
}

.verification-status.contradicted {
  background: #ffebee;
  color: #d32f2f;
}

.verification-details p {
  margin: 0 0 12px 0;
  color: #666;
  line-height: 1.4;
}

.verification-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.verification-link {
  color: #1e3c72;
  text-decoration: none;
  font-size: 14px;
}

.verification-link:hover {
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .text-detection {
    padding: 16px;
  }
  
  .input-methods {
    flex-direction: column;
  }
  
  .detection-options {
    flex-direction: column;
    gap: 24px;
  }
  
  .detection-actions {
    flex-direction: column;
  }
  
  .summary-conclusion {
    flex-direction: column;
    gap: 16px;
  }
  
  .analysis-tabs {
    flex-wrap: wrap;
  }
  
  .keywords-grid {
    grid-template-columns: 1fr;
  }
}
</style> 